<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="label">司机姓名:</div>
      <el-input
        v-model="listQuery.name"
        placeholder="输入司机姓名"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleSearch"
      />

      <div class="label">手机号:</div>
      <el-input
        v-model="listQuery.mobile"
        placeholder="输入手机号"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleSearch"
      />
      <div class="label">车牌号:</div>
      <el-input
        v-model="listQuery.licenseNo"
        placeholder="输入车牌号"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleSearch"
      />

      <!-- <div class="label">创建时间:</div>
      <el-date-picker
        v-model="timeFrame"
        type="datetimerange"
        range-separator=" ~ "
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']"
        align="right"
        style="height:36px;"
      /> -->

      <el-button
        v-waves
        class="filter-item"
        style="margin-left: 10px"
        type="info"
        icon="el-icon-refresh"
        @click="resetSearch()"
      >重置</el-button>
      <el-button
        v-waves
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-search"
        @click="handleSearch()"
      >搜索</el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      border
      stripe
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="司机姓名" align="center">
        <template slot-scope="{ row }">
          <span class="link-type"> {{ row.name }} </span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建人" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.createdUserName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="{row}">
          <span>{{ row.createdTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="车牌号" align="center">
        <template slot-scope="{row}">
          <span>{{ row.licenseNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="车型名称" align="center">
        <template slot-scope="{row}">
          <span>{{ row.typeName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="车长" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.lengthName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="额定载重" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.ratedLoad }}</span>
        </template>
      </el-table-column>
      <el-table-column label="车辆所有人" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.owner }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />

  </div>
</template>

<script>
import { carRelationList, getCarLength, getCarType } from '@/api/tms/car'
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'
import {
  parseTime
} from '@/utils'

export default {
  name: 'ComplexTable',
  components: {
    Pagination
  },
  directives: {
    waves
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        current: 1,
        size: 20,
        name: undefined,
        mobile: undefined,
        createdUserName: undefined,
        licenseNo: undefined,
        startTime: undefined,
        endTime: undefined
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑货物',
        create: '新增货物'
      },
      pvData: [],
      goodsTypeList: [],
      unitList: [],
      searchGoodsTypeList: [],
      timeFrame: [],
      carTypeList: [],
      carLengthList: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    getTypeList() {
      getCarType().then(res => {
        this.carTypeList = res
      })
    },
    getCarLengthList() {
      getCarLength().then(res => {
        this.carLengthList = res
      })
    },
    init() {
      this.getTypeList()
      this.getCarLengthList()
      this.getList()
    },
    getList() {
      this.listLoading = true
      carRelationList(this.listQuery).then((response) => {
        this.list = response.records
        console.log(response)
        this.list.map((item, index) => {
          item.sort = index + 1
        })
        this.total = response.total
        this.listLoading = false
      })
    },
    // 搜索
    handleSearch() {
      this.listQuery.current = 1
      if (this.timeFrame.length > 1) {
        this.listQuery.startTime = parseTime(this.timeFrame[0])
        this.listQuery.endTime = parseTime(this.timeFrame[1])
      }
      this.getList()
    },
    resetSearch() {
      this.listQuery = {
        current: 1,
        size: 20,
        name: undefined,
        mobile: undefined,
        createdUserName: undefined,
        licenseNo: undefined,
        startTime: undefined,
        endTime: undefined
      }
      this.getList()
    }

  }
}
</script>

<style lang="scss">
.filter-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  .filter-item {
    margin-bottom: 0px;
  }

  .align-items {
    margin-bottom: 0;
  }

  .label {
    margin-right: 10px;
    margin-left: 10px;
  }
}

.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: center;

  button {
    width: 100px;
  }
}

.content {
  margin-left: 0px;
  display: flex;

  .val {
    flex: 1;
  }

  .label {
    width: 30px;
    text-align: center;
  }
}
</style>
